<template>
  <!-- <div class="layer" v-if="isShow" ref="layerRef"> -->
  <div class="layer" v-if="isShow">
    <div class="layer-main">
      <Icon class="close-btn" name="close" v-if="$props.showCloseBtn" @click="onClose" />
      <h2 v-if="$props.title">{{ $props.title }}</h2>
      <div class="cont">
        <div v-if="$props.message ?? $props.messageHtml">
          <p v-if="$props.message">{{ $props.message }}</p>
          <div v-else v-html="$props.messageHtml"></div>
        </div>
        <slot></slot>
      </div>
      <div class="foot">
        <template v-if="$props.showCancelBtn">
          <Button type="default" class="cancel" block size="small" @click="onCancel">{{ $props.cancelBtnText }}</Button>
        </template>
        <template v-if="$props.showConfirmBtn">
          <Button type="primary" class="confirm" block size="small" @click="onConfirm">{{
            $props.confirmBtnText
          }}</Button>
        </template>
      </div>
    </div>
    <Icon class="close-foot" size="30" name="close" color="#fff" @click="onClose" v-if="$props.footCloseBtn" />
  </div>
</template>

<script setup>
import { defineProps, ref, unref, onMounted, onUnmounted, computed, useContext } from 'vue';
import { Button, Icon } from 'vant';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '温馨提示',
  },
  message: String,
  messageHtml: String,
  messageAlign: String,
  showCloseBtn: {
    type: Boolean,
    default: false,
  },
  showCancelBtn: {
    type: Boolean,
    default: true,
  },
  showConfirmBtn: {
    type: Boolean,
    default: true,
  },
  cancelBtnText: {
    type: String,
    default: '取消',
  },
  confirmBtnText: {
    type: String,
    default: '确定',
  },
  footCloseBtn: {
    type: Boolean,
    default: true,
  },
});

const isShow = computed(() => props.show);

// onMounted(() => {
//   window.addEventListener('click', layerEle, false);
// });

// onUnmounted(() => {
//   window.addEventListener('click', layerEle, false);
// });

// const layerRef = ref(null);
// const layerMainRef = ref(null);
// const layerEle = (ev) => {
//   if (!unref(layerMainRef)) return;
//   if (unref(layerRef).contains(ev.target) && !unref(layerMainRef).contains(ev.target)) {
//     emit('close');
//     emit('cancel');
//     emit('confirm');
//   }
// };

const { emit } = useContext();

const onClose = () => {
  emit('close');
};

const onCancel = () => {
  emit('cancel');
};

const onConfirm = () => {
  emit('confirm');
};
</script>

<style scoped lang="less">
.layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  .layer-main {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate3d(-50%, -50%, 0);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    width: 90%;
    // min-height: 150px;
    border-radius: 10px;
    background: @default-color;
    .close-btn {
      position: absolute;
      top: -40px;
      left: 0;
      color: @default-color;
      font-size: 26px;
    }
    & > h2 {
      padding: 5px 0;
      font-size: @size16;
      text-align: center;
      font-weight: bold;
    }
    .cont {
      margin: 10px 0;
    }
    .foot {
      display: flex;
      justify-content: center;
      padding-top: 5px;
      width: 100%;
      :deep(.van-button) {
        padding: 20px 0;
        width: 48%;
        &.cancel {
          margin-right: 20px;
          background: #e0e0e0;
        }
      }
    }
  }
  .close-foot {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    opacity: 0.75;
  }
}
</style>
